<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员档案</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../../static/plugins/elementui/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">

    <template>

        <el-table
                :data="tableData.list"
                height="500"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    label="档案编号"
                    prop="fileNumber" width="100">
            </el-table-column>
            <el-table-column
                    label="会员姓名"
                    prop="name" width="100">
            </el-table-column>
            <el-table-column
                    label="会员性别"
                    prop="sex" windth="100">
            </el-table-column>
            <el-table-column
                    label="会员身份证"
                    prop="idCard"
                    width="220">
            </el-table-column>
            <el-table-column
                    label="电话号码"
                    prop="phoneNumber" width="150">
            </el-table-column>
            <el-table-column
                    label="注册时间"
                    prop="regTime" width="220">
            </el-table-column>
            <el-table-column
                    label="邮箱"
                    prop="email" width="180">
            </el-table-column>
            <el-table-column
                    label="生日"
                    prop="birthday" width="220">
            </el-table-column>
            <el-table-column
                    label="备注"
                    prop="remark">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="180"
                    label="操作">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入姓名查找" @input="showMember(name)"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index,scope.row)">修改
                    </el-button>
                    <!--handleEdit(scope.$index, scope.row)-->

                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteMember(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :current-page="tableData.pageNum"
            :page-size="tableData.pageSize"
            :total="tableData.total"
            @current-change="showMember(name,$event)">
    </el-pagination>
    <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>

    <el-dialog title="会员编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="档案编号" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.fileNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="会员姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form.sex" placeholder="请选择">
                    <el-option
                            label="男"
                            value="男">
                    </el-option>
                    <el-option
                            label="女"
                            value="女">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="会员身份证" :label-width="formLabelWidth">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.regTime"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :disabled="true">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.birthday"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.remark">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEdit">取 消</el-button>
            <el-button type="primary" @click="updateMember(form)">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="../../../static/plugins/elementui/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            tableData: [],
            name: '',
            /**
             * 当前页数
             */
            pageNum: '',
            form: ''
        }, data() {
            return {
                form: {
                    id:'',
                    fileNumber:'',
                    name: '',
                    sex: '',
                    idCard: '',
                    phoneNumber: '',
                    regTime:'',
                    email: '',
                    birthday: '',
                    remark:''
                }, dialogFormVisible: false,
                formLabelWidth: '120px',
                tableData: [],
                name: '',
                pageNum: '',pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            };
        },
        methods: {
            handleEdit(index, row) {
                console.log(row)
                this.dialogFormVisible=true;
                this.form.id=row.id;
                this.form.fileNumber=row.fileNumber;
                this.form.name=row.name;
                this.form.sex=row.sex;
                this.form.idCard=row.idCard;
                this.form.phoneNumber=row.phoneNumber;
                this.form.regTime=row.regTime;
                this.form.email=row.email;
                this.form.birthday=row.birthday;
                this.form.remark=row.remark;
            },showMember(name, pageNum) {
                this.pageNum = pageNum;
                axios.get("/member/showMember", {
                    params: {
                        'name': name,
                        'pageNum': pageNum
                    }
                }).then(data => {
                    if (data.data.code==null||data.data.code==''){
                        console.log(data.data)
                        this.tableData =JSON.parse(data.data);
                    }else if (data.data.code=='-998'){
                        this.$message({
                            showClose: true,
                            message: '你无该权限!!',
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            },
            deleteMember(row) {
                this.$confirm('此操作将永久删除该会员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/member/deleteMember", {
                        params: {
                            'id': row.id
                        }
                    }).then(data => {
                        if (data.data == true || data.data == 'true') {
                            this.$message({
                                showClose: true,
                                message: '删除成功!',
                                type: 'success'
                            });

                        } else if (data.data == 'exception') {
                            this.$message({
                                showClose: true,
                                message: '该会员还有其他预约服务,不能删除!',
                                type: 'warning'
                            });
                        }else if (data.data.code='-998') {
                            this.$message({
                                showClose: true,
                                message: '你无该权限!!',
                                type: 'error'
                            });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '删除失败!',
                                type: 'error'
                            });
                            }

                        this.showMember(this.name, this.pageNum)
                    }).catch(e => {
                        this.$message({
                            showClose: true,
                            message: '该会员还有其他预约服务,不能删除!',
                            type: 'warning'
                        });
                        this.showMember(this.name, this.pageNum)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },updateMember(form){
                /**
                 * 修改会员
                 */
                axios.post("/member/updateMember",{
                    'id':form.id,
                    'fileNumber':form.fileNumber,
                    'name':form.name,
                    'sex':form.sex,
                    'idCard':form.idCard,
                    'phoneNumber':form.phoneNumber,
                    'regTime':form.regTime,
                    'email':form.email,
                    'birthday':form.birthday,
                    'remark':form.remark,

                }).then(data =>{
                    if (data.data==true||data.data=='true'){
                        this.dialogFormVisible=false;
                        this.$message({
                            showClose: true,
                            message: '修改成功!',
                            type: 'success'
                        });
                    }else if (data.data.code=='-998') {
                        this.dialogFormVisible=false;
                        this.$message({
                            showClose: true,
                            message: '你无该权限!!',
                            type: 'error'
                        });
                    }else {
                        this.dialogFormVisible=false;
                        this.$message({
                            showClose: true,
                            message: '修改失败!',
                            type: 'error'
                        });
                        }
                    this.showMember(this.name, this.pageNum)
            }).catch(e =>{
                    this.dialogFormVisible=false;
                    this.$message({
                        showClose: true,
                        message: '修改失败!',
                        type: 'error'
                    });
                    this.showMember(this.name, this.pageNum)
                });
            },cancelEdit(){
                this.dialogFormVisible=false;
                this.$message({
                    showClose: true,
                    message: '您取消修改!'
                });
            }

        }, created() {
            this.showMember();
        }
    });
</script>
</html>